<template>
    <div class="pinglun_all">
        <!-- <div class="pinglunqu">
            <div class="user_avatar">
                <div class="avatar"
                    style="background-image: url('https://easyreadfs.nosdn.127.net/K4_CGynkC_uo4jc8I6kxvg==/8796093024660590404');">
                </div>
                <span class="usernames">用户名</span>
            </div>
            <div class="user_comments">
                <span class="user_comments">评论评论评论评论评论评论评论评论评论评论评论评论</span>
                <span class="user_comments_times">2024-9-26</span>
            </div>
        </div> -->
        <div class="pinglunqu" v-for="(item, index) in pinglun.username" :key="index">
            <div class="user_avatar">
                <div class="avatar"
             :style="{ backgroundImage: `url(${pinglun.avatar[index]})` }">
        </div>
                <span class="usernames">{{item}}</span>
            </div>
            <div class="user_comments">
                <span class="user_comments">{{pinglun.text[index]}}</span>
                <span class="user_comments_times">{{pinglun.time[index]}}</span>
            </div>
        </div>

    </div>

</template>
<style lang="less">
.pinglun_all {
    height: 30vh;
    overflow: scroll;

    .pinglunqu {
        width: 90vw;
        margin: 0 5vw;
        height: 13vh;
        margin-bottom: 1vh;
        background-color: rgba(241, 241, 241, 0.4);

        .user_avatar {
            display: inline-block;
            position: relative;
            top: -2vh;
            height: 13vw;
            width: 20vw;

            text-align: left;
            z-index: 10;

            .avatar {
                width: 13vw;
                height: 13vw;
                display: block;
                background-size: cover;
                border-radius: 50%;
            }

            .usernames {
                text-align: left;
                font-size: 8px;
                overflow: hidden;
                width: 20vw;
                left: 0;
                display: block;
                position: relative;
            }
        }

        .user_comments {
            text-align: left;
            display: inline-block;
            width: 60vw;
            height: 10vh;
            padding: 5px;
            font-size: 12px;

            .user_comments {
                display: block;
                overflow: scroll;
            }

            .user_comments_times {
                text-align: right;
                display: block;
                color: rgb(42, 42, 42);
            }
        }
    }
}
</style>

<script>
// 导入书籍评论接口
import { bookComment } from '../api/myindex';
export default {
    name: "pinglunView",
    data() {
        return {
            arr: [],
            bookid: "",
            pinglun: {
                avatar: [],
                username: [],
                text: [],
                time: [],
            }
        }
    },
    created() {
        console.log(this.$route.query);
        this.bookid = this.$route.query.id;
        this.getmydata2();
    },
    methods: {
        async getmydata2() {
            try {
                // 调用接口
                const response = await bookComment({
                    type: 3,
                    id: this.bookid,
                    page: 1,
                });
                // 请求成功
                console.log("请求成功！");
                if (response) {
                    console.log("---content>", response);
                    console.log("评论数据", response.data.data);
                    this.pinglun.avatar=response.data.data.map(item=>item.avatar);
                    this.pinglun.text = response.data.data.map(item=>item.text);
                    this.pinglun.username = response.data.data.map(item=>item.username);
                    this.pinglun.time = response.data.data.map(item=>item.posttime); 
                    console.log("评论数据", this.pinglun);
                                    
                }
            } catch (err) {
                // 请求失败
                console.log("请求失败,请刷新", err);
            }
        }
    }
}
</script>